<template>
  <div class="comment-panel">
    <VideoSearchSelect @loadData="loadDataVideoSelect"></VideoSearchSelect>
    <TableList
      ref="tableInfoRef"
      :columns="columns"
      :fetch="loadDataList"
      :data-source="tableData"
      :options="tableOptions"
      :ext-height="tableOptions.extHeight"
    >
      <template #slotComment="{ index, row }">
        <div class="comment-info">
          <Avatar :avatar="row.avatar" :user-id="row.userId" />
          <div class="comment">
            <div>
              <router-link target="_blank" class="a-link nick-name" :to="`/user/${row.userId}`">{{
                row.nickName
              }}</router-link>
              <template v-if="row.replyUserId">
                回复@
                <router-link
                  target="_blank"
                  class="a-link nick-name"
                  :to="`/user/${row.replyUserId}`"
                  >{{ row.replyNickName }}</router-link
                >的评论
              </template>
            </div>
            <div class="content">{{ row.content }}</div>
            <div class="image-show" v-if="row.imgPath">
              <Cover :preview="true" fit="cover" :source="row.imgPath + '_thumbnail.jpg'"></Cover>
            </div>
            <div class="time-info">
              <div class="time">{{ row.postTime }}</div>
              <div class="iconfont icon-delete" @click="delComment(row.commentId)"></div>
            </div>
          </div>
        </div>
      </template>

      <template #slotVideo="{ index, row }">
        <router-link :to="`/video/${row.videoId}`" target="_blank" class="a-link">
          <Cover :source="row.videoCover"></Cover>
          <div class="video-name">{{ row.videoName }}</div>
        </router-link>
      </template>
    </TableList>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import VideoSearchSelect from './VideoSearchSelect.vue'
import { ucenterDelCommentHttpRequest, ucenterLoadCommentHttpRequest } from '@/services/api/ucenter'
import type { PaginationResultVO, VideoComment } from '@/services/api/video'
import { confirmMessageBox } from '@/utils/confirm'
interface Column {
  label: string
  scopedSlots: string
  width?: number
}
const columns: Column[] = [
  {
    label: '评论信息',
    scopedSlots: 'slotComment'
  },
  {
    label: '视频信息',
    scopedSlots: 'slotVideo',
    width: 150
  }
]

const currentVideoId = ref<string>()

const loadDataVideoSelect = (e: string) => {
  currentVideoId.value = e
  loadDataList(e)
}

const tableInfoRef = ref()
const tableOptions = ref({
  extHeight: 10
})

const tableData = ref<PaginationResultVO<VideoComment>>()

const loadDataList = async (videoId?: string) => {
  const res = await ucenterLoadCommentHttpRequest(currentVideoId.value, tableData.value?.pageNo)
  if (!tableData.value) {
    tableData.value = res.data
  } else {
    Object.assign(tableData.value, res.data)
  }
  console.log(res, '表格数据u')
}

const delComment = async (commentId: number) => {
  confirmMessageBox({
    message: '确认要删除该评论？',
    onConfirm: async () => {
      const res = await ucenterDelCommentHttpRequest(commentId)
      loadDataList()
    }
  })
}
</script>

<style lang="less" scoped>
.comment-panel {
  .comment-info {
    display: flex;
    .comment {
      margin-left: 10px;
    }
    .time-info {
      display: flex;
      font-size: 12px;
      .iconfont {
        margin-left: 5px;
        font-size: 13px;
        cursor: pointer;
      }
    }
  }
  .video-name {
    text-decoration: none;
    color: var(--text3);
    font-size: 13px;
    margin-top: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.image-show {
  width: 100px;
  height: 100px;
  overflow: hidden;
  margin: 5px 0px;
}
</style>
